From d5ade2359539648845a5854ed353b29367961d74 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Nov 2023 11:02:20 +0100
Subject: refactor(components): extract MetaItem from MetaList

* replace `items` prop on MetaList with `children` prop: it was too
restrictive and the global options was not really useful. It is better
too give control to the consumers.
---
 src/pages/article/[slug].tsx | 194 +++++++++++++++++++++----------------------
 1 file changed, 95 insertions(+), 99 deletions(-)

(limited to 'src/pages/article/[slug].tsx')

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 7875d1d..0cba7a6 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -15,10 +15,11 @@ import {
   PageLayout,
   SharingWidget,
   Spinner,
-  type MetaItemData,
   Time,
   type CommentData,
   Heading,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getAllArticlesSlugs,
@@ -112,102 +113,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
   const { content, id, intro, meta, title } = article;
   const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    author
-      ? {
-          id: 'author',
-          label: intl.formatMessage({
-            defaultMessage: 'Written by:',
-            description: 'ArticlePage: author label',
-            id: 'MJbZfX',
-          }),
-          value: author.name,
-        }
-      : undefined,
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'ArticlePage: publication date label',
-        id: 'RecdwX',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update && dates.publication !== dates.update
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'ArticlePage: update date label',
-            id: 'ZAqGZ6',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-    {
-      id: 'reading-time',
-      label: intl.formatMessage({
-        defaultMessage: 'Reading time:',
-        description: 'ArticlePage: reading time label',
-        id: 'Gw7X3x',
-      }),
-      value: readingTime,
-    },
-    thematics
-      ? {
-          id: 'thematics',
-          label: intl.formatMessage({
-            defaultMessage: 'Thematics:',
-            description: 'ArticlePage: thematics meta label',
-            id: 'CvOqoh',
-          }),
-          value: thematics.map((thematic) => {
-            return {
-              id: `thematic-${thematic.id}`,
-              value: (
-                <Link key={thematic.id} href={thematic.url}>
-                  {thematic.name}
-                </Link>
-              ),
-            };
-          }),
-        }
-      : undefined,
-  ];
-  const filteredHeaderMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
-  const footerMetaLabel = intl.formatMessage({
-    defaultMessage: 'Read more articles about:',
-    description: 'ArticlePage: footer topics list label',
-    id: '50xc4o',
-  });
-
-  const footerMeta: MetaItemData[] = topics
-    ? [
-        {
-          id: 'more-about',
-          label: footerMetaLabel,
-          value: topics.map((topic) => {
-            return {
-              id: `topic--${topic.id}`,
-              value: (
-                <ButtonLink
-                  className={styles.btn}
-                  key={topic.id}
-                  to={topic.url}
-                >
-                  {topic.logo ? <NextImage {...topic.logo} /> : null}{' '}
-                  {topic.name}
-                </ButtonLink>
-              ),
-            };
-          }),
-        },
-      ]
-    : [];
-
   const webpageSchema = getWebPageSchema({
     description: intro,
     locale: CONFIG.locales.defaultLocale,
@@ -333,8 +238,99 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
         comments={getComments(commentsData)}
-        footerMeta={footerMeta}
-        headerMeta={filteredHeaderMeta}
+        footerMeta={
+          topics ? (
+            <MetaList>
+              <MetaItem
+                hasInlinedValues
+                label={intl.formatMessage({
+                  defaultMessage: 'Read more articles about:',
+                  description: 'ArticlePage: footer topics list label',
+                  id: '50xc4o',
+                })}
+                value={topics.map((topic) => {
+                  return {
+                    id: `topic--${topic.id}`,
+                    value: (
+                      <ButtonLink
+                        className={styles.btn}
+                        key={topic.id}
+                        to={topic.url}
+                      >
+                        {topic.logo ? <NextImage {...topic.logo} /> : null}{' '}
+                        {topic.name}
+                      </ButtonLink>
+                    ),
+                  };
+                })}
+              />
+            </MetaList>
+          ) : undefined
+        }
+        headerMeta={
+          <MetaList>
+            {author ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Written by:',
+                  description: 'ArticlePage: author label',
+                  id: 'MJbZfX',
+                })}
+                value={author.name}
+              />
+            ) : null}
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Published on:',
+                description: 'Page: publication date label',
+                id: '4QbTDq',
+              })}
+              value={<Time date={dates.publication} />}
+            />
+            {dates.update ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Updated on:',
+                  description: 'Page: update date label',
+                  id: 'Ez8Qim',
+                })}
+                value={<Time date={dates.update} />}
+              />
+            ) : null}
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Reading time:',
+                description: 'ArticlePage: reading time label',
+                id: 'Gw7X3x',
+              })}
+              value={readingTime}
+            />
+            {thematics ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Thematics:',
+                  description: 'ArticlePage: thematics meta label',
+                  id: 'CvOqoh',
+                })}
+                value={thematics.map((thematic) => {
+                  return {
+                    id: `thematic-${thematic.id}`,
+                    value: (
+                      <Link key={thematic.id} href={thematic.url}>
+                        {thematic.name}
+                      </Link>
+                    ),
+                  };
+                })}
+              />
+            ) : null}
+          </MetaList>
+        }
         id={id as number}
         intro={intro}
         title={title}
-- 
cgit v1.2.3